<html>
<style>
</style>
<body>
<title>印章</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div>
画布：宽<input type="number" id="width" value="200" style="width:5em"> 高<input type="number" id="height" value="200" style="width:5em"><br>
字体：<input type="text" id="font_family" value="华文行楷" style="width:8em"> <input type="number" id="font_size" value="48" style="width:4em">px<br>
<input type="text" id="text1" value="海" style="width:3em"> X<input type="number" id="x1" value="100" style="width:5em"> Y<input type="number" id="y1" value="100" style="width:5em"><br>
<input type="text" id="text2" value="天" style="width:3em"> X<input type="number" id="x2" value="100" style="width:5em"> Y<input type="number" id="y2" value="150" style="width:5em"><br>
<input type="text" id="text3" value="鹰" style="width:3em"> X<input type="number" id="x3" value="50" style="width:5em"> Y<input type="number" id="y3" value="100" style="width:5em"><br>
<input type="text" id="text4" value="印" style="width:3em"> X<input type="number" id="x4" value="50" style="width:5em"> Y<input type="number" id="y4" value="150" style="width:5em"><br>
<button id="button">绘制</button>
</div>
<br>
<canvas id="canvas1" width="100" height="100">
<script>
function $id(s) { return document.getElementById(s); }
var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");

function draw(){
    var width = $id("width").value;
    var height = $id("height").value;
    canvas1.width = width;
    canvas1.height = height;
    ctx1.fillStyle = "red";
    ctx1.fillRect(0, 0, width, height);
    ctx1.font = $id("font_size").value + "px " + $id("font_family").value;
    ctx1.fillStyle = "white";
    ctx1.fillText($id("text1").value, $id("x1").value, $id("y1").value);
    ctx1.fillText($id("text2").value, $id("x2").value, $id("y2").value);
    ctx1.fillText($id("text3").value, $id("x3").value, $id("y3").value);
    ctx1.fillText($id("text4").value, $id("x4").value, $id("y4").value);
}

draw();
$id("button").addEventListener("click",function(){
    draw();
}, false);
</script>
</body>
</html>